.balancesBlock
  box-sizing border-box
  overflow auto

.signerBalanceWarning
  position relative
  border-top 1px solid var(--ghostA)
  font-weight 400
  padding 10px 0px
  cursor pointer

.signerBalancesExpanded
  width 100%

.signerBalancesWrap
  margin 0px 6px 6px 6px
  padding 2px 3px 1px 3px
  box-sizing border-box
  overflow auto
  background var(--ghostZ)
  border-radius 20px
  min-height 76px
  position relative
  z-index 999

  .signerBalance:first-child
    border-top-right-radius 17px
    border-top-left-radius 17px

  .signerBalance:last-child
    border-bottom-right-radius 17px
    border-bottom-left-radius 17px

  .signerBalance:first-child:last-child
    border-bottom-right-radius 17px

.signerBalanceWarningTitle
  position relative
  height 24px
  width 100%
  z-index 200000
  font-size 10px
  display flex
  justify-content center
  align-items center
  color var(--moon)
  text-transform uppercase
  pointer-events none

.signerBalanceWarningTitle:hover
  color var(--moonLight)

.signerBalanceWarningMessage
  position relative
  width 100%
  text-align center
  padding 20px
  box-sizing border-box
  font-size 12px
  font-weight 300

.signerBalanceTotal
  position relative
  height 52px
  width 100%
  z-index 200000
  font-size 14px
  margin-bottom 6px

  .signerBalanceButtons
    display flex
    justify-content left
    align-items center
    height 100%

    .moduleItemButton
      background var(--ghostA)
      box-shadow 0px 4px 6px var(--ghostY)
      border-bottom 2px solid var(--ghostZ)
      cursor pointer
      * 
        pointer-events none

    .moduleItemButton:hover
      background var(--ghostB)
      transform translateY(-1px)
      border-bottom 2px solid var(--ghostZ)
      box-shadow 0px 8px 30px -12px var(--ghostX)
      
    .moduleItemButton:active
      background var(--ghostB)
      transform translateY(0px)
      box-shadow 0px 2px 4px var(--ghostX)

  .signerBalanceButton
    height 40px
    margin-left 13px
    background var(--ghostA)
    border-bottom 2px solid var(--ghostZ)
    box-shadow 0px 1px 4px var(--ghostX)
    border-radius 20px
    box-sizing border-box
    cursor pointer
    z-index 4000
    display flex
    justify-content center
    align-items center
    font-size 11px
    font-weight 400
    letter-spacing 1px
    text-transform uppercase
    padding 1px 20px 0px 21px

    *
      pointer-events none
      margin-left 2px

  .signerBalanceButton:hover
    background var(--ghostB)
    color var(--outerspace)
    // color var(--good)

  .signerBalanceTotalText
    position absolute
    left 16px
    right 23px
    bottom 0px
    top 0px
    display flex
    justify-content flex-end
    align-items center

    .signerBalanceTotalLabel
      margin-right 6px
      margin-top 1px
      text-transform uppercase
      font-size 10px
      letter-spacing 0.5px
      font-weight 600
      color var(--mint)

    .signerBalanceTotalValue
      font-size 16px
      font-family 'FiraCode'
      letter-spacing -1px
      text-align center
      display flex
      align-items center
      color var(--mint)

.signerBalancesLoading
  position absolute
  top 46px
  left 9px
  right 9px
  bottom 78px
  z-index 200
  border-radius 17px
  display flex
  justify-content center
  align-items center
  background var(--ghostA)

  .loader, .loader:after
    border-radius 100%
    width 22px
    height 22px

  .loader
    font-size 7px
    position relative
    text-indent -9999em
    border-top 3px solid var(--ghostZ)
    border-right 3px solid var(--ghostZ)
    border-bottom 3px solid var(--ghostZ)
    border-left 3px solid var(--ghostD)
    transform translateZ(0)
    animation load8 0.6s infinite linear !important
    will-change transform

.signerBalance
  position relative
  opacity 1
  height 70px
  width 100%
  transition 0.1s ease-out all
  font-family 'MainFont'
  overflow hidden

  @keyframes sheenLoad
    0%
      transform rotateZ(360deg) translateX(-100%)
    100%
      transform rotateZ(360deg) translateX(100%)

  .signerBalanceLoading
    position absolute
    top 0
    bottom 0
    left 0
    transform rotateZ(360deg) translateX(-100%)
    will-change transform
    width 400%
    background linear-gradient(90deg, var(--ghostB0) 25%, var(--ghostB) 48%, var(--ghostB) 52%, var(--ghostB0) 75%)
    animation sheenLoad 5s infinite linear
    transition var(--standardFast)

  .signerBalanceInner
    position relative
    height 100%
    transition all linear 0.8s

  .signerBalanceCurrency
    position absolute
    left 62px
    top 25px
    right 135px
    font-size 15px
    display flex
    align-items center
    font-weight 400
    white-space nowrap
    z-index 2
    overflow hidden

  .signerBalanceChain
    position absolute
    left 60px
    top 8px
    font-size 10px
    display flex
    align-items center
    font-weight 500
    white-space nowrap
    z-index 2
    text-transform uppercase
    letter-spacing 2px
    height 12px
    padding 0px 0px 0px 2px
    border-radius 8px
   
  .signerBalancePrice
    position absolute
    right 12px
    bottom 8px
    left 62px
    font-size 12px
    font-weight 400
    color var(--mint)
    display flex
    align-items center
    justify-content space-between
    font-family 'FiraCode'

  .signerBalanceOk
    display flex
    align-items center
    justify-content center

  .signerBalanceCurrentValue
    display flex
    align-items center

  .signerBalanceCurrentPrice
    display flex
    align-items center
    margin-left -2px

  .signerBalanceCurrentPriceChange
    display flex
    align-items center
    margin-left 4px

  .signerBalanceCurrentPriceChangeUp
    color var(--good)

  .signerBalanceCurrentPriceChangeDown
    color var(--bad)

  .signerBalanceChainIcon
    position absolute
    left -6px
    top 9px
    height 16px
    width 16px
    background var(--foreverwhite)
    border-radius 16px
    overflow hidden
    z-index 2
    color black
    box-shadow 0px 0px 2px var(--ghostA)

  .signerBalanceIcon
    position absolute
    left 12px
    top 18px
    border-radius 16px
    overflow hidden
    z-index 1

    img:before
      content attr(alt)
      top 0
      bottom 0
      left 0
      right 0
      border-radius 16px
      position absolute
      background var(--outerspace)
      color var(--ghostZ)
      display flex
      justify-content center
      align-items center
      font-size 11px
      font-weight 300
      letter-spacing -0.5px
      margin-left -0.5px
     
    img
      height 30px
      width 30px
      border-radius 16px
      position absolute
      overflow hidden

  .signerBalanceValue
    position absolute
    right 10px
    top 22px
    font-size 19px
    text-align center
    display flex
    align-items center
    font-family 'FiraCode'
    font-weight 300

    .displayValueSymbol
      font-family 'MainFont'
      font-weight 600
      font-size 0.65em
      line-height 13px
      position relative
      letter-spacing 0.5px
      margin-top -0.12em
      margin-right 0.36em

  .signerBalanceEquivalent
    position absolute
    right 7px
    bottom 5px
    font-size 12px
    color var(--outerspace05)
    display flex
    align-items center
    font-family 'FiraCode'

.signerBalanceSliderDisplay
  position absolute
  top 0
  left 0
  right 0
  transition none

.signerBalanceSliderShadow
  position relative
  opacity 0

.signerBalanceNoTokens
  height 48px
  display flex
  justify-content center
  align-items center
  color var(--outerspace08)
  text-transform uppercase
  font-size 12px
  border-bottom 1px solid var(--ghostA)

.moduleLoading
  height 40px
  display flex
  justify-content center
  align-items center
  padding 20px
  border-bottom 1px solid var(--ghostA)
  margin 0px 16px

.moduleLoadingLoader
  border-radius 50%
  width 30px
  height 30px
  margin 30px auto
  font-size 10px
  position relative
  text-indent -9999em
  border-top 3px solid var(--ghostZ)
  border-right 3px solid var(--ghostZ)
  border-bottom 3px solid var(--ghostZ)
  border-left 3px solid var(--good)
  transform translateZ(0)
  animation load 0.5s infinite linear
  will-change transform

@keyframes load
  0%
    -webkit-transform rotate(0deg)
    transform rotate(0deg)

  100%
    -webkit-transform rotate(360deg)
    transform rotate(360deg)
